
type Size = 'small' | 'large'

type Props = {
  title: string,
size?: Size
}

type SizeObject = {
  [key in `${Size}BG`]: string
}
const sizeObj: SizeObject = {
  smallBG: 'bg-[url(@/assets/svg/small-title.svg)]',
  largeBG: 'bg-[url(@/assets/svg/long-title.svg)]'
}



const class_name = 'w-full h-[36px]  bg-no-repeat bg-cover flex items-center'

const text_color = 'text-[18px] font-bold text-transparent bg-clip-text bg-gradient-to-b from-[rgba(255,255,255,1)] to-[rgba(87,175,248,1)] tracking-[2px] pl-[28px] '

const TitleMain = ({ title, size = 'small' }: Props) => {
  return <div
    className={`${class_name} ${sizeObj[`${size}BG`]}`}>
    <span className={text_color}>{title}</span>
  </div>
}

export default TitleMain